<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      @import "https://rsms.me/inter/inter.css";

      :root {
        --color-bg: #fff;
        --color-input-bg: #f7f7f7;
        --color-input-border: #e1e1e1;
        --color-fg: #000;
        --color-fg-muted: #666;
      }

      @media (prefers-color-scheme: dark) {
        :root {
          --color-bg: #000;
          --color-input-bg: #1f1f1f;
          --color-input-border: #333;
          --color-fg: #fff;
          --color-fg-muted: #d0d0d0;
        }
      }

      * {
        box-sizing: border-box;
        margin: 0;
      }

      html {
        font-family: "Inter", sans-serif;
        line-height: 1.5;
        margin: 0;
      }

      body {
        background-color: var(--color-bg);
        isolation: isolate;
        color: var(--color-fg-muted);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem 0;
        border: 1px solid var(--color-input-border);
        overflow: hidden;
        height: 100vh;
        width: 100vw;
      }

      /* Add "demo" class to body to see scale. */
      body.demo {
        --size: 250px;
        width: var(--size);
        height: var(--size);
        margin: 25vh auto;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
      }

      h1 {
        color: var(--color-fg);
        font-weight: 600;
        letter-spacing: -0.025em;
        font-size: 1.25rem;
        margin-top: 0.5rem;
      }

      .logo {
        width: 100%;
        height: 100%;
        max-width: 4rem;
        max-height: 4rem;
        margin-bottom: 0.5rem;
      }

      .logo-invert {
        filter: invert(0);
      }

      @media (prefers-color-scheme: dark) {
        .logo-invert {
          filter: invert(1);
        }
      }

      .progress-bar-container {
        margin-top: 1.75rem;
        border-radius: 99999px;
        height: 0.5rem;
        width: 80%;
        position: relative;

        border: 1px solid var(--color-input-border);
        background-color: var(--color-input-bg);
      }

      #progress-bar {
        background: #007aff;
        border-radius: 99999px;
        position: absolute;
        width: 0%;
        transition: width 0.5s ease;

        --offset: 1px;
        top: calc(-1 * var(--offset));
        left: calc(-1 * var(--offset));
        bottom: calc(-1 * var(--offset));
        right: calc(-1 * var(--offset));
      }

      p {
        font-size: 0.825rem;
        margin-top: 1rem;
        max-width: 30ch;
        margin-inline: auto;
        text-align: center;
      }
    </style>
  </head>

  <!-- === USE THIS TO SEE SCALE <body class="demo"> === -->

  <body>
    <svg
      id="logo"
      width="64"
      height="64"
      viewBox="0 0 24 24"
      fill="black"
      xmlns="http://www.w3.org/2000/svg"
      class="logo logo-invert"
    >
      <g>
        <path
          d="M12.763 22.8533C12.665 22.9083 12.3961 23 12 23C11.6039 23 11.3329 22.9083 11.237 22.8533L2.76298 18.0724C2.41276 17.8748 2 17.1741 2 16.7809V7.21907C2 6.82389 2.41276 6.12518 2.76298 5.92759L11.237 1.14667C11.335 1.09167 11.6039 1 12 1C12.3961 1 12.6671 1.09167 12.763 1.14667L21.237 5.92759C21.5872 6.12518 22 6.82593 22 7.21907V16.4652L14.0846 12V11.118C14.0846 10.9367 13.9846 10.7676 13.8241 10.678L12.2606 9.79593C12.1793 9.75111 12.0896 9.7287 12 9.7287C11.9104 9.7287 11.8207 9.75111 11.7394 9.79593L10.1759 10.678C10.0154 10.7696 9.91536 10.9367 9.91536 11.118V12.882C9.91536 13.0633 10.0154 13.2324 10.1759 13.322L11.7394 14.2041C11.8207 14.2489 11.9104 14.2713 12 14.2713C12.0896 14.2713 12.1793 14.2489 12.2606 14.2041L13.0423 13.762L20.9577 18.2272L12.763 22.8493V22.8533Z"
        />
      </g>
    </svg>

    <h1>Amazon Q is updating</h1>
    <div class="progress-bar-container">
      <div id="progress-bar"></div>
    </div>
    <p id="message">Downloading update...</p>
  </body>

  <script>
    function updateProgress(progress) {
      document.getElementById("progress-bar").style.width = progress + "%";
    }

    function updateMessage(message) {
      document.getElementById("message").innerHTML = message;
    }

    function updateError(message) {
      document.getElementById("message").innerHTML = message;
    }

    function retryUpdate() {
      // TODO: add logic to retry update
    }

    // Call this fn to see a demo of the progress bar
    function demo() {
      let progress = 0;
      function update() {
        progress += Math.min(100, 5 * Math.random());
        updateProgress(progress);
        updateMessage("Downloading update...");
        if (progress < 100) {
          setTimeout(update, 100);
        } else {
          updateMessage("Installing update...");
        }
      }

      update();
    }
  </script>
</html>
